import toNative from '@/utils/toNative'
import { Select,type SelectProps } from 'ant-design-vue'
import type { VueNode } from 'ant-design-vue/es/_util/type'
import type { BaseSelectRef } from 'ant-design-vue/es/vc-select'
import { nextTick, ref } from 'vue'
import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import styled from 'vue3-styled-components'

export interface PrefixSelectProps extends SelectProps {
    prefixString?: VueNode;
  class?: string
}

@Component
export class PrefixSelect extends Render {
    @Prop() prefixString?: string | VueNode

    selectDom = ref(<div></div>)

    selectContainerElement = styled.div`
        .ant-select {
            width: 100%;
        }
        .ant-select-selection-overflow {
            flex-wrap: nowrap !important;
        }
        .ant-select-multiple .ant-select-selector {
            padding: 0 11px !important;
        }
        .ant-select-multiple .ant-select-selection-search {
            margin-inline-start: 0 !important;
        }
    `

    onMounted() {
        if (typeof this.prefixString !== 'string') { 
            return 
        }
        nextTick(() => {
            if(this.selectDom.value && typeof this.prefixString === 'string') {
                
                const selector = (this.selectDom.value as any).ctx.vnode.el.querySelector('.ant-select-selector') as HTMLElement
                const selectorSearch = selector.querySelector('.ant-select-selection-search')
                const selectorPlaceholder = selector.querySelector('.ant-select-selection-placeholder')
                const selectorOverflow = selector.querySelector('.ant-select-selection-overflow')


                if (selectorPlaceholder) {
                    selectorPlaceholder.textContent = this.$attrs.placeholder as string
                }
                
                selector.style.flexWrap = 'nowrap'

                // 获取select下的dom
                const inputDom = document.createElement('div')
                inputDom.className = 'relative pl-12 -ml-8 flex overflow-hidden'
                selectorSearch && inputDom.append(selectorSearch)
                selectorPlaceholder && inputDom.append(selectorPlaceholder)
                selectorOverflow && inputDom.append(selectorOverflow)
                // 创建prefix
                const dom = document.createElement('span')
                dom.className = 'text-black-300 mr-8 flex items-center flex-shrink-0'
                dom.textContent = this.prefixString

                selector.prepend(inputDom)
                selector.prepend(dom)
            }
        })
    }

    render() {
        this.selectDom.value = <this.selectContainerElement class="w-full">
            <Select {...this.$props} {...this.$attrs} placeholder={this.$attrs.mode === 'multiple' ? '' : this.$attrs.placeholder}/>
        </this.selectContainerElement>
        return this.selectDom.value
    }
}

export default toNative<PrefixSelectProps>(PrefixSelect)